<template>
  <div>
   <h3>手动实现 vue v1版本中dispatch 和 broadcast   这2个api已经在 vue2中废弃</h3>

    <ul>
      <li>最高层的钱---> 「￥{{money}}」</li>
    </ul>

    <div>
      <button @click="say">最高层组件-广播 </button>
    </div>
    <child :money='money' @costMoney='costMoney' @notice='notice'></child>

    <hr>
     <h3>event -bus 实现</h3>
    <say></say>
    <hello></hello>
  </div>
</template>

<script>
import child from './components/child.vue'
import say from './components/say.vue'
import hello from  './components/hello.vue'

export default {
  name: 'father',
  components: {
    child,
    say,
    hello
  },
  data() {
    return {
      money: 100
    }
  },
  methods: {
    costMoney(value) {
      console.log('最高组件的 coseMoney', value)
      this.money = this.money+ value
    },

    say() {
      this.$eventBroadcast('notice', 50)
    },

    notice(value) {
      console.log('最高组件的 notice', value)
    }
  }
}
</script>
